<template>
	<div class="login-container">
		<div class="logo">
			<img src="@/assets/images/login/logo.png" alt="检察院logo" />
			<h2>河北省人民检察院</h2>
			<h3>检务保障平台</h3>
		</div>
		<van-form @submit="onSubmit">
			<van-field v-model="uLoginId" name="uLoginId" placeholder="请输入用户名" :rules="userNameProp">
				<template #left-icon>
					<van-icon name="user-o" />
				</template>
			</van-field>
			<van-field v-model="uLoginPwd" type="password" name="uLoginPwd" placeholder="请输入密码"
				:rules="[{ required: true, message: '请填写密码' }]">
				<template #left-icon>
					<van-icon name="lock" />
				</template>
			</van-field>
			<div class="button-group">
				<van-button type="primary" class="reset-btn" block @click="handleReset">重置</van-button>
				<van-button type="primary" class="login-btn" block native-type="submit">
					登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>



<script>
	import {
		myLogin
	} from "@/api/index.js"
	import {
		Toast
	} from 'vant';
	export default {
		name: 'LoginPage',
		data() {
			return {
				uLoginId: '',
				uLoginPwd: '',
				userNameProp: [{
					required: true,
					message: '请填写用户名'
				}, ]
			}
		},
		methods: {
			//重置
			handleReset() {
				this.uLoginId = ''
				this.uLoginPwd = ''
			},
			// 登录
			onSubmit(values) {
				myLogin(values)
					.then(res => {
						if (res.code == 200) {
							Toast.success(res.message);
							localStorage.setItem('user', JSON.stringify(res.data))
							console.log(res.data)
							this.$router.push('/home')
						} else {
							Toast.error(res.message);
						}
					})
					.catch(err => {
						Toast.fail('登录失败：请检查用户名和密码');
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #4086FF 0%, #4086FF 50%, #ECF3FF 100%);
		padding: 20px;

		.logo {
			padding-top: 60px;
			text-align: center;
			margin-bottom: 60px;

			img {
				width: 80px;
				height: 80px;
				margin-bottom: 20px;
			}

			h2 {
				color: #fff;
				font-size: 24px;
				margin-bottom: 10px;
			}

			h3 {
				color: #fff;
				font-size: 20px;
			}
		}

		:deep(.van-field) {
			background: transparent;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			margin-bottom: 20px;

			.van-field__left-icon {
				color: #fff;
			}

			input {
				color: #fff;

				&::placeholder {
					color: rgba(255, 255, 255, 0.8);
					text-align: center;
				}
			}
		}

		.button-group {
			margin-top: 40px;
			display: flex;
			gap: 20px;

			.reset-btn {
				flex: 1;
				color: #fff;
				border-color: #fff;
			}

			.login-btn {
				flex: 1;
				background: #fff;
				color: #4086FF;
				border: none;
			}
		}
	}
</style>